<template>
	<view>
		<view v-if="!is_custom" class="box">
			<view  v-for="(item, index) in list" :key="index" >
				<view class="add_reduce" :class="item.add?'add':'reduce'">{{item.add?list_type[0].list[0]:list_type[0].list[1]}}</view>
				<view v-if="item.type==1" >
					<view class="cu-form-group">
						<view class="title">请输入单价：</view>
						<input @input="input_type_num1" :data-target="index" 
						class="input" type="digit" placeholder="单价" v-model="item.num1"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">请输入数量：</view>
						<input @input="input_type_num2"  :data-target="index" 
						class="input" type="digit" placeholder="数量" v-model="item.num2"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">本次结果：</view>
						<view >{{item.result}}</view>
					</view>
					
				</view>
				<view v-if="item.type==2" >
					<view class="cu-form-group">
						<view class="title">请输入基数：</view>
						<input @input="input_type_num1" :data-target="index" 
						class="input" type="digit" placeholder="基数" v-model="item.num1"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">请输入百分数：</view>
						<input @input="input_type_num2"  :data-target="index"
						class="input" type="digit" placeholder="百分数" v-model="item.num2"></input>
						<view >%</view>
					</view>
					<view class="cu-form-group">
						<view class="title">本次结果：</view>
						<view >{{item.result}}</view>
					</view>
					
				</view>
				<view v-if="item.type==3" >
					
					<view class="cu-form-group">
						<view class="title">请输入基数：</view>
						<input @input="input_type_num1"  :data-target="index"
						class="input" type="digit"  placeholder="基数" v-model="item.num1"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">请输入增长率：</view>
						<input @input="input_type_num2"  :data-target="index"
						class="input" type="digit" placeholder="增长率" v-model="item.num2"></input>
						
					</view>
					<view class="cu-form-group">
						<view class="title">请输入单位增长数：</view>
						<input @input="input_type_num3"  :data-target="index"
						class="input" type="digit" placeholder="单位增长数" v-model="item.num3"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">本次结果：</view>
						<view >{{item.result}}</view>
					</view>
					
				</view>
				
				
				
			</view>
			<view class="cu-form-group fixed-result">
				<view class="title" >最终结果：</view>
				<view class="title result">{{result}}</view>
			</view>
		</view>
		<view v-else class="temp-box">
			<view class="confirm cf-txt-confirm" @tap="to_confirm">完成</view>
			<view  v-for="(item, index) in cur_list" :key="'cur_'+index" class="cu-form-group">
				
				<view class="title" >{{item.add?list_type[0].list[0]:list_type[0].list[1]}}</view>
				<view class="title result">{{list_type[1].list[parseInt(item.type)-1]}}</view>
				
			</view>
			<view  class="cu-form-group" v-for="(item, index) in list_type" :key="index">
				<view class="title">{{item.name}}</view>
				<picker @change="changeType" :data-target="index" :value="item.typeLength" :range="item.list">
					<view class="picker">
						{{item.typeLength>-1?item.list[item.typeLength]:'请选择'}}
					</view>
				</picker>
			</view>
			
		</view>
		
		
		<view v-if="is_custom"  @tap="to_add">
			<view class="cf-btn">{{is_custom?'添加':'确定计算'}}</view>
		</view>
		
		<view v-else class="cf-tab-m margin-btm">
			<view @tap="to_de_custom">自定义计算模板</view>
		</view>
		<ayAd :type="2" :showOffAt="true"></ayAd>
	</view>
</template>

<script>
	import ayAd from '@/components/ay-ad/ay-ad.vue';
	export default {
		components: {
			ayAd,
		},
		computed: {

		},
		data() {
			return {
				have_storage : false,//有缓存了就每次变更都要计算全部
				key_storage : 'de_temp_calc',
				is_custom :false ,
				
				
				list_type:[
						{
							typeLength : 0,
							name :'请选择符号：',
							list : ['+', '-'],
						},
						{
							typeLength : 0,
							name :'请选择类型：',
							list : ['单价*数量', '基数*百分数', '基数+增长率*单位增长数'],
						},
					],
				
				result:0,
				
				cur_list:[],
				cur_list_item:{
					add:true,
					type:1,
					num1:null,
					num2:null,
					num3:null,
					result:0,
				},
				list:[
					{
						add:false,
						type:1,//1单价*数量 2基数*百分数 3基数+增长率*增长基数
						num1:null,
						num2:null,
						num3:'-',
						result:0,
					},
					{
						add:true,
						type:1,//1单价*数量 2基数*百分数 3基数+增长率*增长基数
						num1:null,
						num2:null,
						num3:'-',
						result:0,
					},
					{
						add:true,
						type:2,//1单价*数量 2基数*百分数 3基数+增长率*增长基数
						num1:null,
						num2:null,
						num3:'-',
						result:0,
					},
					{
						add:true,
						type:2,//1单价*数量 2基数*百分数 3基数+增长率*增长基数
						num1:null,
						num2:null,
						num3:'-',
						result:0,
					},
					{
						add:false,
						type:3,//1单价*数量 2基数*百分数 3基数+增长率*增长基数
						num1:null,
						num2:null,
						num3:null,
						result:0,
					},
				],
			};
		},
		onReady: function() {
			
		},
		onLoad: function() {
			let that = this;
			that.setData_init();
		},
		onShow: function() {
			let that = this;
			
		},
		// #ifdef MP-WEIXIN
		//微信小程序的分享
		onShareAppMessage: function(options) {
		
		},
		// #endif
		methods: {
			setData_init(){
				let that = this;
				try {
				    const  key_storage = uni.getStorageSync(that.key_storage);
				    if (key_storage) {
						that.list = key_storage ;
						that.have_storage = true ;
						that.set_result();
				    }
				} catch (e) {
				    // error
				}
				
			},
			input_type(e){
				console.log(e)
				let that = this;
				let index = e.currentTarget.dataset.target ;
				let item = that.list[index] ;
				let type = item.type ;
				
				that.set_by_input_type(index,item,type);
				
			},
			input_type_num1(e){
				
				let value = e.detail.value ;
				console.log(value)
				if(isNaN(parseFloat(value)))return;
				
				let that = this;
				let index = e.currentTarget.dataset.target ;
				let item = that.list[index] ;
				let type = item.type ;
				that.list[index].num1 = parseFloat(value)  ;
				that.set_by_input_type(index,item,type);
				
			},
			input_type_num2(e){
				let value = e.detail.value ;
				console.log(value)
				if(isNaN(parseFloat(value)))return;
				
				let that = this;
				let index = e.currentTarget.dataset.target ;
				let item = that.list[index] ;
				let type = item.type ;
				that.list[index].num2 = parseFloat(value) ;
				that.set_by_input_type(index,item,type);
				
			},
			input_type_num3(e){
				let value = e.detail.value ;
				console.log(value)
				if(isNaN(parseFloat(value)))return;
				
				
				let that = this;
				let index = e.currentTarget.dataset.target ;
				let item = that.list[index] ;
				let type = item.type ;
				that.list[index].num3 =  parseFloat(value) ;
				that.set_by_input_type(index,item,type);
				
			},
			set_by_input_type(index,item,type){
				let that = this;
				if(type==1){
					if(!that.val_iscan(item))return;
					let result = item.num1 * item.num2 ;
					that.list[index].result = result ;
					//将第一个数量赋给其他
					if(index==0){
						that.list.forEach(item_set=>{
							let index_set = that.list.indexOf(item_set);
							if(item_set.type==1){
								that.list[index_set].num2 = item.num2 ;
							}
						})
					}
				}else if(type==2){
					if(!that.val_iscan(item))return;
					let result = (item.num1 * (item.num2/100)).toFixed(2) ;
					that.list[index].result = result ;
				}else if(type==3){
					if(!that.val_iscan(item))return;
					let result =  parseFloat(item.num1)  + parseFloat(item.num2*item.num3) ;
					//let result =  item.num1 + (item.num2*item.num3) ;//会连接错误
					
					that.list[index].result = result ;
				}
				
				//将第一个赋值作为需要的基数
				let base_num = 0 ;
				for(let i=0;i<that.list.length;i++){
					let item = that.list[i];
					if((item.type==1)&&(!item.add)){
						base_num = item.result ;
						break ;
					}
					
				}
				that.list.forEach(item_set=>{
					let index_set = that.list.indexOf(item_set);
					if(item_set.type==2){
						that.list[index_set].num1 = base_num ;
					}
				})
				
				let is_all_add = false ;
				if(!that.have_storage){
					if(index==(that.list.length-1)){
						is_all_add = true ;
					}
				}else{
					is_all_add = true ;
				}
				if(is_all_add){
					that.set_result();
				}
			},
			changeType(e) {
				let that = this;
				let value = e.detail.value;
				let index = e.currentTarget.dataset.target ;
				let item = that.list_type[index] ;
				that.list_type[index].typeLength = value;
				let cur_list_item = that.set_cur_list_item(index,value,item);
				// console.log('type', value)
				// console.log('index', index)
				that.cur_list_item = cur_list_item ;
			
			},
			set_cur_list_item(index,value,item){
				let that = this;
				let type = parseInt(that.list_type[1].typeLength) +1  ;
				let add = that.list_type[0].typeLength==0?true:false ;
				let cur_list_item = {
					add: add,
					type: type,
					num1:null,
					num2:null,
					num3:null,
					result:0,
				};
				
				return cur_list_item ;
			},
			to_add(){
				let that = this;
				that.cur_list.push(that.cur_list_item);
			},
			to_de_custom(){
				let that = this;
				that.is_custom = true ;
				that.cur_list = [];
			},
			to_confirm(){
				let that = this;
				if(that.cur_list.length==0){
					that.$api.msg('至少添加一种！');
					return ;
				}
				that.is_custom = false ;
				that.list = that.cur_list ;
				that.result = 0 ;
				
				that.set_key_storage(that.cur_list);
			},
			set_key_storage(list){
				let that = this;
				uni.setStorage({
				    key: that.key_storage,
				    data: list,
				    success: function () {
				        //console.log('success');
				    }
				});
			},
			set_result(){
				let that = this;
				let result = 0 ;
				that.list.forEach(item=>{
					let add = item.add ;
					let result_item = item.result ;
					
					if(add){
						result = parseFloat(result) + parseFloat(result_item) ;
					}else{
						result = parseFloat(result) - parseFloat(result_item) ;
					}
				})
				
				
				that.result = result.toFixed(2) ;
				that.set_key_storage(that.list);
			},
			val_iscan(item){
				let iscan = false ;
				let type = item.type ;
				if(type==1){
					if(item.num1 == null)return iscan;
					if(item.num2 == null)return iscan;
				}else if(type==2){
					if(item.num1 == null)return iscan;
					if(item.num2 == null)return iscan;
				}else if(type==3){
					if(item.num1 == null)return iscan;
					if(item.num2 == null)return iscan;
					if(item.num3 == null)return iscan;
				}
				iscan = true ;
				return iscan;
			},
		},
	}
</script>

<style lang="scss">
	.input{
		
		text-align: right!important;
	}
	.margin-btm{
		margin-bottom: 100upx;
	}
	.temp-box{
		.confirm{
			text-align: right;
			padding: 20upx;
		}
	}
	.fixed-top{
		margin-top: 100upx;
	}
	.box{
		
		margin: 20upx 10upx;
		margin-top: 120upx;
		.fixed-result{
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			z-index: 2;
		}
		.add{
			background-color: #00FF6F;
			color: #FFFFFF;
		}
		.reduce{
			background-color: #F43F3B;
			color: #FFFFFF;
		}
		.add_reduce{
			text-align: center;
			font-size: 60upx;
			padding: 10upx;
		}
		.result{
			color: #F43F3B;
		}
		
		.box-hengCenter{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
		.box-hengSpace-B{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 95%;
		}
	}
	
</style>
